<template>
  <div>
    <el-form ref="addForm" :model="addNew" :rules="rules" label-width="150px"
             style="width: 1000px;position:relative;overflow: hidden;height: 320px">
      <el-form-item label="角色名" prop="name">
        <el-input v-model="addNew.name"/>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="addNew.description"/>
      </el-form-item>
      <el-form-item label="角色序号" prop="sort">
        <el-input v-model="addNew.sort"/>
      </el-form-item>
      <el-form-item label="角色权限" prop="permissionIds">
        <el-select v-model="addNew.permissionIds" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in permissionTable" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item style="position: absolute;left: 50%;bottom: 0;transform: translateX(-71%)">
        <el-button type="primary" @click="submitForm()">添加</el-button>
        <el-button type="danger" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "roleAddNew",
  data() {
    return {
      addNew: {
        name: "",
        description: "",
        sort: "",
        permissionIds: []
      },
      rules: {
        name: [
          {required: true, message: "用户名为空", trigger: "blur"},
          {validator: this.checkName, trigger: "blur"},
        ],
        description: [],
        sort: [
          {required: true, message: "序号为空", trigger: "blur"},
        ],
        permissionIds: [
          {required: true, message: "权限为空", trigger: "blur"},
        ]
      },
      permissionTable:[],
    }
  },
  methods: {
    checkName(rule, value, callback) {
      if (value === '超级管理员') {
        callback(new Error('用户名不能为\"超级管理员\"'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let url = "http://localhost:9999/zx-ams/role/addNew";
          let data = this.qs.stringify(this.addNew);
          this.axios.create(
              {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
          ).post(url, data).then((response) => {
            if (response.data.state === 200) {
              this.$message({message: "完成新增，返回并刷新角色列表", type: "success"})
              this.addNew.permissionIds.splice(0);
              this.resetForm();
              this.$emit("changeTab", "roleList");
            } else {
              this.$message({message: response.data.message, type: "error"})
            }
          })
        } else {
          this.$message({message: "数据尚未符合要求", type: "error"})
        }
      });
    },
    resetForm() {
      this.$refs.addForm.resetFields();
    },//用于清除el-form内所有内容
    loadPermission() {
      let url = "http://localhost:9999/zx-ams/permission/list"
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).get(url).then((response) => {
        if (response.data.state === 200) {
          this.permissionTable = response.data.data;
        }
      })
    }
  },
  mounted() {
    this.loadPermission()
  }
}
</script>

<style scoped>

</style>